<template>
  <div id="category">
    <nav-bar class="home-nav">
      <template #left>
        <van-icon name="arrow-left" />
      </template>
      <template #center>
        <van-search v-model="value" placeholder="请输入搜索关键词"
          ><template #action>
            <div @click="onSearch">搜索</div>
          </template></van-search
        >
      </template>
      <template #right>
        <van-icon name="chat-o" size="18" />
      </template>
    </nav-bar>

    <my-content>
      <div class="category">
        <van-sidebar v-model="active" @change="onChange">
          <van-sidebar-item
            v-for="item in categoryList"
            :key="item.id"
            :title="item.title"
          />
        </van-sidebar>
        <van-grid :column-num="3">
          <van-grid-item v-for="item in categoryData" :key="item.title">
            <van-image :src="item.image" />
            <span>{{ item.title }}</span>
          </van-grid-item>
        </van-grid>
      </div>
    </my-content>
  </div>
</template>

<script>
import { getCategoryList } from "@/network/category.js";
import MyContent from "@/components/common/content/Content.vue";
import NavBar from "@/components/common/navbar/NavBar.vue";

export default {
  name: "Category",
  components: {
    MyContent,
    NavBar,
  },
  data() {
    return {
      categoryList: [],
      categoryData: [],
      active: 0,
      value: "",
    };
  },
  methods: {
    onChange(index) {
      this.categoryData = this.categoryList[index].list;
    },
  },
  created() {
    getCategoryList().then((res) => {
      this.categoryList = res;
      this.categoryData = res[0].list;
    });
  },
};
</script>

<style scoped>
#category {
  overflow: hidden;
}
.category {
  display: flex;
  align-items: flex-start;
  height: 100%;
}
.van-search {
  position: fixed;
  z-index: 1;
  padding: 0;
  margin-top: 5px;
}
.category .van-sidebar {
  overflow: scroll;
  height: 100%;
}
.category .van-sidebar .van-sidebar-item {
  padding: 10px 12px;
  font-size: 14px;
}

.category .van-grid {
  flex: 1;
  height: 100%;
  overflow: scroll;
}
.van-grid-item span {
  font-size: 12px;
  margin-top: 10px;
}
</style>
